styled components [Project] Pre-onboarding: Sir.Loin 📆 2022년 1월 27일 ~ 1월 29일 / Front-end 4명 Front-end 상품과 관련된 기본 정보, 등록, 주문, 배송, 프로모션 등 여러 옵션을 관리할 수 있는 사이트를 구현한 프로젝트. 필터 함수와 커스텀 토글 버튼을 활용하여 상품의 노출을 변경하는 것이 주된 기능이다. Material-UI 라이브러리 활용하여 달력 및 시간 지정 컴포넌트. 설정한 기간이 만료되었을 경우, ... Reactstyled componentsReact 타입스크립트에서 styled-components Prop 타입 지정하기 styled 함수 제네릭의 첫 번째로 아래처럼 넣어주면 됩니다. 예를들어서 아래와 같이 Block 이라는 컴포넌트를 만든다고 해봅시다. 근데 이 컴포넌트를 사용하려고 보니까 자동 완성이 안 됩니다. 이건 우리가 앞에서 집어 넣은 제네릭이 Template Literal Tagged Function 안에서 쓰는 Interpolation Function 타입으로만 들어가서 그렇습니다. 이 타입은 ... typescriptstyled componentsReactReact React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest Emotion & Styled-components 이와 같은 jsx문법을 @emotion/styled 패키지가 인식하지 못하는 것 같았다. 하지만 한 시간을 삽질한 결과.. 먼저 루트 폴더에서 아래와 같이 바벨 플러그인을 설치 한다. yarn add --dev @emotion/babel-plugin 루트 폴더에 .babelrc 파일을 만든 후 다음과 같이 작성해준다. npm-trends를 보면 styled-components 보다 emoti... JavaScriptCSSstyled componentsTILReactemotionCSS [42byte] React + TypeScript로 프로젝트 시작하기 이름에서 알 수 있듯이 타입스크립트는 자바스크립트 기반에 타입 문법을 추가한 프로그래밍 언어이다. 자바스크립트 기반인 만큼, 타입과 관련된 문법만 익히고 나니 금방 적응할 수 있었다. 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환되는데, 런타임에서 오류를 발견하는 자바스크립트와 다르게 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기... Reactstyled components42bytetypescript42byte [회고] Styled-Components를 사용하며 Props 전달 : Style 컴포넌트를 만들어 전달받은 props를 이용해 선택적으로 CSS를 사용할 수 있음 스타일 컴포넌트를 사용하면서 가장 신경이 쓰였던 부분은 바로 네이밍 이었다. 첫번째 방법으로는 컴포넌트에 특정 기능에 맞는 이름을 넣어 모든 태그에 네이밍을 해주는 방식이다. 공통 컴포넌트를 사용할때 스타일 컴포넌트와의 구분이 힘들어졌다. 다음으로 사용해본 방식은 가장 상위의 태그... 회고TILstyled components프로젝트 구조네이밍TIL styled-components 를 emotion 으로 변환하기 지금까지는 CSS-in-JS 인, styled-components 를 사용해왔었다. 최근에 emotion 으로 사용하는 분들이 점점 늘어가는 추세인 것 같아서 나도 이번 기회에 emotion에 대하여 알아보려한다. styled-components와 매우 비슷하여 배움에 있어서는 큰 어려움이 없어보였으나, 직접 부딪혀 봐야 알 것 같다. 기존에 styled-components로 반응형 레이아웃... 포트폴리오styled componentsReactemotionReact Styled-components - (1)설치 및 기본 문법 설치 및 불러오기 설치 npm i styled-components 불러오기 import styled from "styled-components"; styled component css 적용 시 자동완성 기능 vscode-styled-components 익스텐션 설치하기! 기본 문법 예시... Reactstyled componentsReact CSS의 진화과정 CSS CSS는 HTML을 꾸며주기 위해 사용하는 스타일시트 언어 단점은 어떤 CSS가 적용될지 예측하기 어렵고, 코드 재사용이 어렵다. SCSS @import @import 구문을 사용하면 다른 sass 파일을 불러올 수 있다. 장점은 css 파일을 쉽게 모듈화 하고, 나누어 작업이 가능하다. SCSS 단점 파일을 분리했지만 중첩 선언이 있는 경우 어떤 것이 먼저 적용될지 가늠이 되지 않는... css-modulesCSSscssstyled componentsBEMBEM [Web template] Next.js with-styled-components (2) 로 css-in-js 방식인 styled-component를 적용하기 _documents.tsx 파일은 Next.js 에서 제공하는 document를 커스터마이징 할 수 있다 Next.js 페이지들은 마크업 정의를 건너뛰기 때문에 <html>, <body>, <head> 등을 필수적으로 작업해야 할 때는 _documents.tsx 파일을 필수적으로 사용해야 한다 예시) <Html lang='... Web template프로젝트next.jsprojectstyled componentsWeb template 다른 컴포넌트 참조하기 들어가며 프로젝트를 하면서 부모 컴포넌트의 hover 이벤트에 반응해서 자식 컴포넌트의 배경색을 바꾸려고 했다. 그런데 styled-components가 class나 id를 통해 스타일을 적용하는 방식이 아니다 보니 방법이 떠오르지 않았고, 부모 컴포넌트의 hover 이벤트에 따라 바뀌는 state를 하나 만들려고 했다. 그런데 자식 컴포넌트의 배경색은 애플리케이션의 렌더링과는 전혀 관계가 ... styled componentsTILTIL React에서의 CSS in JS 그래서 styled-components라는 라이브러리를 통해 스타일을 바로 입혀서 컴포넌트를 만들어 사용할 수 있다. 예를 들어 div박스를 하나 만들고 싶다면 변수명 = styled.div`` 라는걸 사용하면 된다. 백틱 안에 적용할 css 스타일을 넣어주면 된다. 예를 들어 위에서 만든 Title 요소가 여러가지 색깔 버전으로 필요할 경우, 제목요소를 여러번 복붙하는 것이 아닌 props... styled componentsSassSass How to target child tag w/styled-components styled-components로 구현 중 nth-child() 타케팅이 안된다. class 이름으로 .name:nth-child() 타겟팅은 무척이나 쉬운데 ... 본글은 styled-components 기본 지식을 가짐을 전제로 작성한다. 일단 아래는 html styled-components 컴포넌트를 만든다. item을 타겟팅 해본다. class="item" .item:first-chi... styledselectorreact selectornth-childstyled componentsnth-child React_core // 꾸미기 리엑트에서 리엑트 요소(엘리먼트, DOM요소 라고도 할 수 있음)를 꾸며주는 방법에는 여러가지가 있다. 가장 작은 단위부터 시작하자. 일단 html 예시부터! JSX 예시 혹은 이렇게 쓸 수 있다. src 폴더 안에 style.css파일을 만들고 그 안에 스타일을 정의하고, 그 파일을 불러다 사용하는 방법이다. 1. css 파일을 만든다. 2. css 파일을 채워주면서 .js파일에는 불러올 ... scssstyled componentsReactCSSCSS
[Project] Pre-onboarding: Sir.Loin 📆 2022년 1월 27일 ~ 1월 29일 / Front-end 4명 Front-end 상품과 관련된 기본 정보, 등록, 주문, 배송, 프로모션 등 여러 옵션을 관리할 수 있는 사이트를 구현한 프로젝트. 필터 함수와 커스텀 토글 버튼을 활용하여 상품의 노출을 변경하는 것이 주된 기능이다. Material-UI 라이브러리 활용하여 달력 및 시간 지정 컴포넌트. 설정한 기간이 만료되었을 경우, ... Reactstyled componentsReact 타입스크립트에서 styled-components Prop 타입 지정하기 styled 함수 제네릭의 첫 번째로 아래처럼 넣어주면 됩니다. 예를들어서 아래와 같이 Block 이라는 컴포넌트를 만든다고 해봅시다. 근데 이 컴포넌트를 사용하려고 보니까 자동 완성이 안 됩니다. 이건 우리가 앞에서 집어 넣은 제네릭이 Template Literal Tagged Function 안에서 쓰는 Interpolation Function 타입으로만 들어가서 그렇습니다. 이 타입은 ... typescriptstyled componentsReactReact React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest Emotion & Styled-components 이와 같은 jsx문법을 @emotion/styled 패키지가 인식하지 못하는 것 같았다. 하지만 한 시간을 삽질한 결과.. 먼저 루트 폴더에서 아래와 같이 바벨 플러그인을 설치 한다. yarn add --dev @emotion/babel-plugin 루트 폴더에 .babelrc 파일을 만든 후 다음과 같이 작성해준다. npm-trends를 보면 styled-components 보다 emoti... JavaScriptCSSstyled componentsTILReactemotionCSS [42byte] React + TypeScript로 프로젝트 시작하기 이름에서 알 수 있듯이 타입스크립트는 자바스크립트 기반에 타입 문법을 추가한 프로그래밍 언어이다. 자바스크립트 기반인 만큼, 타입과 관련된 문법만 익히고 나니 금방 적응할 수 있었다. 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환되는데, 런타임에서 오류를 발견하는 자바스크립트와 다르게 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기... Reactstyled components42bytetypescript42byte [회고] Styled-Components를 사용하며 Props 전달 : Style 컴포넌트를 만들어 전달받은 props를 이용해 선택적으로 CSS를 사용할 수 있음 스타일 컴포넌트를 사용하면서 가장 신경이 쓰였던 부분은 바로 네이밍 이었다. 첫번째 방법으로는 컴포넌트에 특정 기능에 맞는 이름을 넣어 모든 태그에 네이밍을 해주는 방식이다. 공통 컴포넌트를 사용할때 스타일 컴포넌트와의 구분이 힘들어졌다. 다음으로 사용해본 방식은 가장 상위의 태그... 회고TILstyled components프로젝트 구조네이밍TIL styled-components 를 emotion 으로 변환하기 지금까지는 CSS-in-JS 인, styled-components 를 사용해왔었다. 최근에 emotion 으로 사용하는 분들이 점점 늘어가는 추세인 것 같아서 나도 이번 기회에 emotion에 대하여 알아보려한다. styled-components와 매우 비슷하여 배움에 있어서는 큰 어려움이 없어보였으나, 직접 부딪혀 봐야 알 것 같다. 기존에 styled-components로 반응형 레이아웃... 포트폴리오styled componentsReactemotionReact Styled-components - (1)설치 및 기본 문법 설치 및 불러오기 설치 npm i styled-components 불러오기 import styled from "styled-components"; styled component css 적용 시 자동완성 기능 vscode-styled-components 익스텐션 설치하기! 기본 문법 예시... Reactstyled componentsReact CSS의 진화과정 CSS CSS는 HTML을 꾸며주기 위해 사용하는 스타일시트 언어 단점은 어떤 CSS가 적용될지 예측하기 어렵고, 코드 재사용이 어렵다. SCSS @import @import 구문을 사용하면 다른 sass 파일을 불러올 수 있다. 장점은 css 파일을 쉽게 모듈화 하고, 나누어 작업이 가능하다. SCSS 단점 파일을 분리했지만 중첩 선언이 있는 경우 어떤 것이 먼저 적용될지 가늠이 되지 않는... css-modulesCSSscssstyled componentsBEMBEM [Web template] Next.js with-styled-components (2) 로 css-in-js 방식인 styled-component를 적용하기 _documents.tsx 파일은 Next.js 에서 제공하는 document를 커스터마이징 할 수 있다 Next.js 페이지들은 마크업 정의를 건너뛰기 때문에 <html>, <body>, <head> 등을 필수적으로 작업해야 할 때는 _documents.tsx 파일을 필수적으로 사용해야 한다 예시) <Html lang='... Web template프로젝트next.jsprojectstyled componentsWeb template 다른 컴포넌트 참조하기 들어가며 프로젝트를 하면서 부모 컴포넌트의 hover 이벤트에 반응해서 자식 컴포넌트의 배경색을 바꾸려고 했다. 그런데 styled-components가 class나 id를 통해 스타일을 적용하는 방식이 아니다 보니 방법이 떠오르지 않았고, 부모 컴포넌트의 hover 이벤트에 따라 바뀌는 state를 하나 만들려고 했다. 그런데 자식 컴포넌트의 배경색은 애플리케이션의 렌더링과는 전혀 관계가 ... styled componentsTILTIL React에서의 CSS in JS 그래서 styled-components라는 라이브러리를 통해 스타일을 바로 입혀서 컴포넌트를 만들어 사용할 수 있다. 예를 들어 div박스를 하나 만들고 싶다면 변수명 = styled.div`` 라는걸 사용하면 된다. 백틱 안에 적용할 css 스타일을 넣어주면 된다. 예를 들어 위에서 만든 Title 요소가 여러가지 색깔 버전으로 필요할 경우, 제목요소를 여러번 복붙하는 것이 아닌 props... styled componentsSassSass How to target child tag w/styled-components styled-components로 구현 중 nth-child() 타케팅이 안된다. class 이름으로 .name:nth-child() 타겟팅은 무척이나 쉬운데 ... 본글은 styled-components 기본 지식을 가짐을 전제로 작성한다. 일단 아래는 html styled-components 컴포넌트를 만든다. item을 타겟팅 해본다. class="item" .item:first-chi... styledselectorreact selectornth-childstyled componentsnth-child React_core // 꾸미기 리엑트에서 리엑트 요소(엘리먼트, DOM요소 라고도 할 수 있음)를 꾸며주는 방법에는 여러가지가 있다. 가장 작은 단위부터 시작하자. 일단 html 예시부터! JSX 예시 혹은 이렇게 쓸 수 있다. src 폴더 안에 style.css파일을 만들고 그 안에 스타일을 정의하고, 그 파일을 불러다 사용하는 방법이다. 1. css 파일을 만든다. 2. css 파일을 채워주면서 .js파일에는 불러올 ... scssstyled componentsReactCSSCSS